<!DOCTYPE html>
<html>

<head>
    <#include "/yq/admin/components/meta.html" />
    <title>蓁奕科技 ${metaTitleSuffix!}</title>
    <#include "/yq/admin/components/stylesheets.html" />
    <style>
        .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>
</head>

<body>
    <div id='app'>
        <el-container>
            <#assign menuIndex="5-1" />
            <#include "/yq/admin/components/menu.html" />
            <el-container>
                <#include "/yq/admin/components/header.html" />
                <el-main>
                    <template>
                        <el-form ref="form" :model="form" label-width="120px">
                            <el-form-item label="商户">
                                <el-select v-model="form.shopId" placeholder="" filterable clearable :disabled="${userRole!2} === 2">
                                    <el-option v-for="item in shops" :key="item.id" :label="item.name" :value="item.id">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="标题">
                                <el-input v-model="form.title"></el-input>
                            </el-form-item>
                            <el-form-item label="副标题">
                                <el-input v-model="form.subtitle"></el-input>
                            </el-form-item>
                            <el-form-item label="背景图片">
                                <el-upload class="avatar-uploader" :on-success="handleBackgroundImageSuccess" :http-request='uploadQnFile' list-type='picture' :show-file-list="false">
                                    <img v-if="form.backgroundImage" :src="form.backgroundImage" class="avatar">
                                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                                </el-upload>
                            </el-form-item>
                            <el-form-item label="封面">
                                <el-upload class="avatar-uploader" :on-success="handleCoverSuccess" :http-request='uploadQnFile' list-type='picture' :show-file-list="false">
                                    <img v-if="form.cover" :src="form.cover" class="avatar">
                                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                                </el-upload>
                            </el-form-item>
                            <el-form-item label="分享标题">
                                <el-input v-model="form.shareTitle"></el-input>
                            </el-form-item>
                            <el-form-item label="分享图片">
                                <el-upload class="avatar-uploader" :on-success="handleShareImgSuccess" :on-error="handleShareImgError" :http-request='uploadQnFile' list-type='picture' :show-file-list="false">
                                    <img v-if="form.shareImage" :src="form.shareImage" class="avatar">
                                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                                </el-upload>
                                <el-button type="text" @click="useCoverForShare" :disabled="!form.cover">使用封面图片</el-button>
                            </el-form-item>
                            <el-form-item label="URL">
                                <el-input v-model="form.url"></el-input>
                            </el-form-item>
                            <el-form-item label="简介">
                                <el-input v-model="form.intro" type="textarea" rows='5'></el-input>
                            </el-form-item>
                            <el-form-item label="HTML">
                                <el-input v-model="form.html" type="textarea" rows='5'></el-input>
                            </el-form-item>
                            <el-form-item label="隐藏">
                                <el-checkbox v-model="form.isHidden" :false-label='0' :true-label='1' :checked='form.isHidden == 1' border>隐藏</el-checkbox>
                            </el-form-item>
                            <el-form-item label="展示数量">
                                <el-input v-model="form.showCount" type="number"></el-input>
                            </el-form-item>
                            <el-form-item label="描述">
                                <el-input v-model="form.desc" type="textarea" rows='5'></el-input>
                            </el-form-item>
                            <el-form-item label="模块风格">
                                <el-input v-model="form.type" type="number"></el-input>
                            </el-form-item>
                            <el-form-item label="模块名称">
                                <el-input v-model="form.name"></el-input>
                            </el-form-item>
                            <el-form-item label="主题色">
                                <el-input v-model="form.themeColor"></el-input>
                            </el-form-item>
                            <el-form-item label="次主题色">
                                <el-input v-model="form.themeColor2"></el-input>
                            </el-form-item>
                            <el-form-item label="在小程序显示">
                                <el-checkbox v-model="form.isMiniApp" :false-label='0' :true-label='1' :checked='form.isMiniApp == 1' border>在小程序显示</el-checkbox>
                            </el-form-item>
                            <el-form-item label="在app显示">
                                <el-checkbox v-model="form.isAPP" :false-label='0' :true-label='1' :checked='form.isAPP == 1' border>在app显示</el-checkbox>
                            </el-form-item>
                            <!-- <el-form-item label="允许删除">
                                <el-checkbox v-model="form.isDeleteable" :false-label='0' :true-label='1' :checked='form.isDeleteable == 1' border>允许删除</el-checkbox>
                            </el-form-item> -->
                            <el-form-item>
                                <el-button type="primary" @click="onSubmit">保存</el-button>
                            </el-form-item>
                        </el-form>
                    </template>
                </el-main>
            </el-container>
        </el-container>
        <#include "/yq/admin/components/footer.html" />
    </div>
    <#include "/yq/admin/components/scripts.html" />
    <#include "/components/qiniu.html" />
    <script type="text/javascript">
    var vue = new Vue({
        el: '#app',
        data() {
            return {
                types: [{ label: '普通活动', value: 1 }],
                imgDatas: [],
                fileList2: [],
                dialogImageUrl: '',
                dialogVisible: false,
                images: [],
                imageUrl: null,
                form: toJson(`${data}`),
                shops: ${shops!'[]'}
            }
        },
        mounted: function() {
            if (this.form.images != '') {
                // this.images = this.form.images.split(';');
                // for (var idx = 0; idx < this.images.length; idx++) {
                //     var url = this.images[idx];
                //     if (url == '') {
                //         continue;
                //     }
                //     this.fileList2.push({ 'name': '', 'url': url })
                // }
            }
        },
        methods: {
            onSubmit() {
                if (!this.form.shopId) {
                    msg("请选择商铺");
                    return;
                }
                var param = {
                    id: this.form.id,
                    shopId: this.form.shopId,
                    title: this.form.title,
                    backgroundImage: this.form.backgroundImage,
                    cover: this.form.cover,
                    subtitle: this.form.subtitle,
                    shareImage: this.form.shareImage,
                    shareTitle: this.form.shareTitle,
                    url: this.form.url,
                    intro: this.form.intro,
                    html: this.form.html,
                    isHidden: this.form.isHidden,
                    showCount: this.form.showCount,
                    desc: this.form.desc,
                    type: this.form.type,
                    name: this.form.name,
                    themeColor: this.form.themeColor,
                    themeColor2: this.form.themeColor2,
                    isMiniApp: this.form.isMiniApp,
                    isAPP: this.form.isAPP,
                    isDeleteable: this.form.isDeleteable
                }
                // console.log(param)
                var url = ''
                var ref = '${referer!""}'
                var url = '/yq/admin/model/submit'
                axiosRequest(param, url, ref)
            },
            handleBackgroundImageSuccess(res, file) {
                this.form.backgroundImage = res.data.url
            },
            handleCoverSuccess(res, file) {
                this.form.cover = res.data.url
            },
            handleShareImgSuccess(res, file) {
                console.log(res)
                console.log(file)
                this.form.shareImage = res.data.url
                // this.form.cover = URL.createObjectURL(file.raw);
            },
            useCoverForShare() {
                this.form.shareImage = this.form.cover;
            },
            handleShareImgError(err, file, fileList) {
                console.log(err);
            },
        },
        filters: {
            fmt(date) {
                return date
            }
        }
    })
    </script>
    <script>
    // vue.tableData = ${items!};
    </script>
</body>

</html>